Web/Mobile Application Process Flow

It has been a while since my last blog post, so here it is and as promised more technical than my workout schedule.

For any junior developer or anyone who wants to get into the world of web and mobile application development, its a very daunting task to select your tools and knowing when to use them. The decision is very much like choosing your first Pokemon, React, Vue or Angular which one is it going to be, and once you choose one of them you really have to stick to one of them to really master it.

To be honest, choosing one framework (technically React is a library) over another is totally upon you as long as you stick to it and understands its ins and outs. As for myself, I chose to learn React as it has a highly active developer community and its constantly improving. This blog entry is about the overall process and tools/libraries I use over the development process. This is what I've discovered to be the most compatible and efficient work flow process and it might be different from somebody else's. Nevertheless, it can be used by someone as a starting point to gain some insight into this world.

Web/Mobile Application Development Process Flow

Whether you are creating an application intended to run on the web or on your phone, the process flow is pretty similar thanks to the fact that React is the main library being used. This is one of the selling point why I chose React over Vue or Angular. It is recommended that you first learn React then venture into React Native as concept from web will smoothly translate into the mobile development process, with some slight differences.

My Technology Stack:

1. React / React Native

2. NodeJs, Express, MongoDb

3. Firebase

4. MobX/Redux

This technology stack is often referred to as MERN (Mongo, Express, React, Node) stack, as it is a good combination of technologies that work together in achieving the development goals. State management is also an important factor and the choice is mostly between MobX and Redux. MobX has much simpler setup and is relatively easy to use as compared to Redux where you have to wrote tons of boilerplate code to achieve something very simple. The benefit of Redux though is that it is more scalable and recommended to use in a more complex application.

Step One: Specification Gathering & Design

This should always be the first step in developing any application as you need to understand the requirements and the goal you are trying to achieve by creating the application. This step involves constant back and forth with the person who you are developing the application for, and often times you must help the client in explaining his/her problem. It is highly likely that the client only has a general idea about the application but it is upon you to code that application, so to make your life easy in future you must ask meaningful questions that develop the idea of the application which translate into meaningful specification.

At this stage, tools such as Figma, Sketch, AdobeXD should also be used to create mock ups or wire-frames of the application to give a preliminary idea about the final applications UI/UX. User interface and user exchange is very important as a pleasant experience while using the application can define the success of the application.

Step Two : Development

This is the main part of the whole process, where most of the development time will be dedicated. If the previous stage of analysis and design was undertaken successful then this stage will be comparatively less painful than having ambiguous specifications and constant changes to the code.

Any dynamic and responsive application can be broken down into two components, the backend and the frontend. As the names suggests, frontend is what the final user will be interacting with. The headings, titles, input field, images, lists, all these are part of the frontend. Backend on the other hand is how data is stored and manipulated, this involves using databases, creating APIs and managing servers.

Fronted programming can be undertaken by using React library, which is a powerful tool used to create dynamic interfaces. One of the advantages of React is that it creates a virtual DOM in memory and only renders the browsers DOM when something changes. If we are developing native mobile applications then React Native is our tool, one of the greatest advanatage of React Native(RN) is that you can create mobile applications on both Android and IOS platform from a single codebase with native performance. In React Native we don't have the DOM elements but they are replaced by their RN counterparts which serve the same purpose. As for styling the user interfaces, we can create our own custom components and style them or use UI kits with built in components, I've used Material UI and UI Kitten and they are both really good options to start with.

Backend programming is a whole another beast, the easy way out of course is using cloud services such as Firebase or AWS to handle most of the heavy work. If you want to create your own database and have it within your sites then, you can create one using NodeJs. NodeJs is a JavaScript runtime environment allowing JS code to be run outside of the browser. To be fair it a very good option to create backend servers using databases such as MongoDb or PostgreSQL, and endpoint interfaces using Express. It has gotten much easier to deploy such servers using Docker but that is out of the scope of this blog.

Step Three: Review and Deployment

At this stage your application should look like how it was envisioned and should be ready for deployment. Before that the whole application should go through a phase of reviewing to confirm that all the specifications and goals are achieved. Another aspect that should be taken care of right now is to load test the application by automating this process or releasing a beta version to a targeted audience. This is also the right time for penetration and security testing to find and vulnerabilities so that if any security issue does show up, it can be dealt with before releasing it to the public. If you just finished developing a mobile application then you'll have to publish it on Apple's App Store or Google's Play store. This process can be streamlined by using CI/CD tools such as Jenkins. Instead if you are launching a web application then you can use something like Heroku or deploy is on your own VPS.

Project Management

There are much better resources and literature for how to handle the process flow of software development, to name a few:

• Waterfall method

• Agile

• Scrum

• Spiral

I would recommened reading more about them as they are tried and tested methods of development, but the thing I have discovered about SLDC is that there is no clear single best method of going through this process. As long as there is some methodology and good time management, you can achieve your goals.

Some of the tools that I use to keep track of the project and communicate with team members are Slack, Jira and Trello. Good project management is very important in achieving the development goals and meeting deadlines.

I hope this gave you an insight into how to develop mobile of web application. Stay tuned for the next blog post.